<!--勾选框-->
<template>
  <el-checkbox
    v-model="value"
    v-bind="$attrs"
    :id="'c' + formItemMeta.columnId"
    :name="'c' + formItemMeta.columnId"
    :clearable="clearable"
  >
    {{title}}
  </el-checkbox>
  <circle-close-filled v-if="clearable"
    style="width: 1.2em; height: 1.2em; margin-top: 0px; margin-left: 5px;cursor: pointer;"
    @click.stop="myclear" 
  />
</template>

<script lang="ts">
  import { defineComponent, nextTick, ref } from 'vue'
  // import { ElCheckbox } from 'element-plus'
  import { CircleCloseFilled } from '@element-plus/icons-vue'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../map'

  export default defineComponent({
    name: 'nf-el-from-item-checkbox',
    inheritAttrs: false,
    components: {
      // ElCheckbox,
      CircleCloseFilled
    },
    props: {
      ...itemProps, // 基础属性
      colName: String, // 变更字段名称
      modelValue: [Boolean, String]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const {
        value
      } = itemController(props, context.emit)
      

      const myclear = () => {
        value.value = false
        nextTick(() => {
          setTimeout(() => {
            value.value = null
          }, 300)
        })
      }


      return {
        value,
        myclear
      }
    }
  })
</script>
